<template>
    <div class="container">
        <h3>养殖管理</h3>
        <h3 v-show="$store.state.zangw == '1'">འདེབས་འཛུགས་དོ་དམ་</h3>
        <el-row style="margin-top:20px;">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>

                    <el-button slot="append" @click="handleSearch"
                        style="background-color: #1BC46D;color: #fff;">搜索</el-button>
                </el-input>
            </el-col>

<!--            <el-button class='theme-button' plain v-if="!added" @click="goadd" style="float:right; margin-right: 10px">新增养殖</el-button>-->
            <el-button class='theme-button' plain  @click="goadd" style="float:right; margin-right: 10px">新增养殖</el-button>

<!--     2024.5.27 产品说不要了       -->
<!--            <el-upload-->
<!--                class="upload-daoru"-->
<!--                ref="upload"-->
<!--                action=""-->
<!--                :on-change="importExcel"-->
<!--                accept=".xlsx,.xls"-->
<!--                :show-file-list='false'-->
<!--                :auto-upload="false">-->
<!--                <el-button class='theme-button' slot="trigger" size="small">导入模板</el-button>-->
<!--            </el-upload>-->
<!--            <el-button class='theme-button' style='float: right;margin-right: 10px' @click='downloadTemplate'>下载导入模板</el-button>-->
        </el-row>
        <div class="list">
            <div class="vfor" v-for="(v, i) in tableData" :key="i">
                <div class="left">
                    <div class="img">
                        <el-image class="img" :preview-src-list="imgUrl+v.plantImgs" :src='imgUrl+v.jyImg'></el-image>
                    </div>
                    <div class="detail">
                        <div class="ttop">
                            <div>
                                <span class="title">种源名称：</span>
                                <span class="name">{{ v.jyName }}</span>
                            </div>
                            <div>
                                <span class="title">养殖批号：</span>
                                <span class="name">{{ v.batch }}</span>
                            </div>
                        </div>
                        <div class="ttop">
                            <div>
                                <span class="title">养殖地块：</span>
                                <span class="name">{{ v.soilName }}</span>
                            </div>
                            <div>
                                <span class="title">所属基地：</span>
                                <span class="name">{{ v.plantBaseName }}</span>
                            </div>
                            <div>
                                <span class="title">养殖规格：</span>
                                <span class="name">{{ v.plantArea }}张</span>
                            </div>

                            <div>
                                <span class="title">开始时间：</span>
                                <span class="name">{{ v.plantTime }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right1">
                    <div class="btn">
                        <el-button type="text" v-if="!edit" @click="handleEdit(i, v)"
                            v-show="$store.state.zangw == '1'">田间管理ཞིང་ཁ་བདག་གཉེར་</el-button>
                        <el-button type="text" v-if="!edit" @click="handleEdit(i, v)"
                            v-show="$store.state.zangw == '2'">养殖任务་</el-button>
                    </div>
<!--                    <div class="btn">-->
<!--                        <el-button type="text" v-if="!publishTask" @click="handlerw(i, v)"-->
<!--                            v-show="$store.state.zangw == '1'">发布任务ལས་འགན་ཁྱབ་བསྒྲགས་བྱེད་པ་</el-button>-->
<!--                        <el-button type="text" v-if="!publishTask" @click="handlerw(i, v)"-->
<!--                            v-show="$store.state.zangw == '2'">发布任务་</el-button>-->
<!--                    </div>-->
                    <div class="btn">
                        <el-button type="text" v-if="!check" @click="handleCheck(i, v)"
                            v-show="$store.state.zangw == '1'">查看ལྟ་ཞིབ་</el-button>
                        <el-button type="text" v-if="!check" @click="handleCheck(i, v)"
                            v-show="$store.state.zangw == '2'">查看</el-button>
                        <el-button type="text" v-if="!check" @click="handleEditPlant(v)">编辑</el-button>
                    </div>
                    <div style='text-align: center' v-if="!check">
                        <el-popconfirm title="确定删除？" @confirm="remove(v)">
                            <el-button slot='reference' type="text" style='color:#f10303'>删除</el-button>
                        </el-popconfirm>
                    </div>
                </div>
            </div>
        </div>
        <el-pagination  background layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"
            :total="total" @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>

    </div>
</template>

<script>
import { plant_findByList, removeCultivation } from '@/request/api';
export default {
    data() {
        return {
            imgUrl:this.$store.state.imageUrls,
            total: 0,
            currentPage: 1,
            pagesize: 10,
            searchName: '',
            tableData: [],
            form: {},
            idx: -1,
            id: -1,
            boxCode: '',
            boxCode1: '',
            check: true,
            added: true,
            edit: true,
            action: '',
            publishTask: true,//发布任务
        };
    },
    created() {

    },
    mounted() {
        this.init();
        this.judgmentAuthority();
    },
    methods: {
        async remove(params){
            const res = await removeCultivation('?id='+params.id)
            if(res.code == 200){
                this.$message({
                    message: res.data,
                    type: 'success'
                })
                this.init()
            }
        },
        handleEditPlant(params){
            this.$router.push({
                path: '/plant/edit',
                query:{
                    params:params
                }
            })
        },
        importExcel(file){
            let formData = new FormData();
            formData.append('file', file.raw);
            let config = {
                headers:{'Content-Type':'multipart/form-data'}
            };
            // 导入模板的接口(formData).then((res) =>{
            //     if (res.code == 200) {
            //         this.$notify({
            //             title: '操作成功',
            //             message: '导入成功',
            //             type: 'success'
            //         });
            //         this.init()
            //     } else{
            //         this.$notify.error({
            //             title: '操作失败',
            //             message: '导入失败',
            //             type: 'error'
            //         });
            //     }
            // })
        },
        downloadTemplate(){
            const companyId =  localStorage.getItem('companyId')
            let templateUrl ="/plant/template/模板下载地址&companyId="
            window.location.href = "http://47.108.220.160:90/jcApi/plant" + templateUrl + companyId
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.init()
        },
        goadd() {
            this.$router.push({
                path: '/plant/added'
            })
        },
        init() {
            plant_findByList({ page: this.currentPage, plantName: this.searchName }).then((res) => {
                res.rows.forEach(v => {
                    v.plantImgs = []
                    v.plantImgs.push('http://47.108.220.160:90/jcApi/plant/file/show/' + v.plantImg)
                });
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handlerw(index, row) {
            this.$router.push({
                path: '/plant/rw',
                query: {
                    id: row.plantBaseId, batch: row.batch
                }
            })
        },
        //搜索
        handleSearch() {
            this.currentPage = 1
            this.init()
        },
        //跳转编辑页面
        handleEdit(index, row) {
            this.$router.push({
                path: '/plant/tending/addtending',
                query: {
                    id: row.plantBaseId,
                    jyId:row.jyId,
                    batch: row.batch
                }
            })
        },

        //删除
        handleCheck(index, row) {
            this.$router.push({
                path: '/plant/tending',
                query: {
                    id: row.id
                }
            })
        },
        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem("panduanzhuangtai"))
            type.map(item1 => {
                if (item1.name == '养殖管理' && item1.children != null) {
                    for (var i = 0; i < item1.children.length; i++) {
                        if (item1.children[i].name == '新增') this.added = false;
                        if (item1.children[i].name == '田间管理') this.edit = false;
                        if (item1.children[i].name == '发布任务') this.publishTask = false;
                        if (item1.children[i].name == '查看') this.check = false;
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
    background: #02B386;
}
/deep/.upload-daoru {
    background: #eee;

    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}

.el-table {
    margin-top: 20px;
}

.el-pagination {
    text-align: right;
}


.el-col {
    margin-bottom: 0;
}

.list {
    margin-top: 20px;

    .vfor {
        background-color: #eee;
        height: 136px;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        border-radius: 4px;
        border: 1px solid #EEEEEE;

        .left {
            width: 85%;
            display: flex;

            .img {
                width: 98px;
                height: 98px;
                margin-right: 20px;
            }

            .detail {
                width: 100%;

                .ttop {
                    width: 100%;
                    display: flex;
                    font-size: 16px;
                    margin-top: 13px;
                    margin-bottom: 32px;

                    div {
                        width: 25%;

                    }

                    .title {
                        color: #767676;
                        overflow: hidden;
                    }

                    .name {
                        color: #0C131B;
                        white-space: nowrap;      /* 确保文本在一行内显示 */
                        overflow: hidden;         /* 超出容器的文本隐藏 */
                        text-overflow: ellipsis;  /* 超出部分显示省略号 */
                        width: 200px;
                    }

                    span {
                        display: inline-block;
                    }
                }
            }
        }

        .right {
            text-align: center;
        }
    }
}
</style>
